<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/user.css">
    <script src="./js/template-web.js"></script>
    <script src="./js/ajax.js"></script>
    <link rel="stylesheet" href="./css/head.css">
    <title>森海塞尔</title>
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="jianjianhead-size">
            <div class="jianjian-headsizebar">
                <div>
                    <a href="/">
                        <img class="jianjian-img" src="./images/index/jianjian-logo.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="/list.html"><span>所有商品</span></a>
                </div>
                <div>
                    <a href="#"><span>新品</span></a>
                </div>
                <div>
                    <a href="#"><span>无线</span></a>
                </div>
                <div>
                    <a href="#"> <span>HiFi</span></a>
                </div>
                <div>
                    <a href="#"><span>降噪</span></a>
                </div>
                <div>
                    <a href="#"><span>耳机配件</span></a>
                </div>
                <div>
                    <a href="#"><span>会员待遇</span></a>
                </div>
                <div>
                    <a href="/activity.html"><span>企业购</span></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="新品上市">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-yonghu">
                            <img src="./images/index/用户.png">
                            <ul class="jianjian-yonghuyc">
                                <!-- 登录状态不同样式 -->
                                <script id="head-login" type="text/html">
                                    {{if uid}}
                                    <div>
                                        <li class="item first">
                                            <span style="font-size: 16px;">欢迎<label
                                                    style="color: #0096D1;">{{uname}}</label></span>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">个人中心</a>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">我的订单</a>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li class="item">
                                            <button onclick="back()" class="jianjian-btn2">退出登录</button>
                                        </li>
                                    </div>
                                    {{else}}
                                    <div>
                                        <li>
                                            <p style="font-size: 5px;">已是会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn">登录</button>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li>
                                            <p style="font-size: 5px;">注册会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn2">注册</button>
                                        </li>
                                    </div>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-gouwuche">
                            <img src="./images/index/购物车.png" alt="">
                            <ul class="jianjian-gouwucheyc">
                                <!-- 购物车不同状态 -->
                                <script id="head-cart" type="text/html">
                                    {{if data}}
                                    {{each data}}
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <div>
                                                <img class="jianjian-img-1" src="{{$value.img1}}">
                                            </div>
                                            <div class="product_name">
                                                {{$value.pname}}
                                            </div>
                                            <div>
                                                <p style="font-size: 16px;">¥{{$value.price}}</p>
                                            </div>
                                            <div class="jianjian-yc">
                                                <a href="javascript:;" onclick="cart_delete({{$value.cart_id}})">
                                                    <img src="./images/index/删 除.png">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                    <li>
                                        <hr>
                                    </li>
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <span>共{{allPnum}}件商品</span>
                                            <span style="color: #36d; font-size: 18px;">¥{{allPrice}}</span>
                                        </div>
                                    </li>
                                    <li>
                                        <button onclick="go_cart()" class="btn-gouwuche">结算</button>
                                    </li>
                                    {{else}}
                                    <li><img src="./images/index/购物车 (1).png"></li>
                                    <li>
                                        <p style="font-size: 9px; color: grey;">您的购物车还没有商品，赶紧选购吧~</p>
                                    </li>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jianjianhead-sizeyc">
            <div class="jianjian-headsizebaryc">
                <div>
                    <a href="#"><img src="./images/index/jianjian-logo.png"></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="IE 100 PRO">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                    <p style="color: gray; font-size: 15px;">大家都在搜</p>
                    <div class="jianjian-text">
                        <a href="#">
                            <p>新品</p>
                        </a>
                        <a href="#">
                            <p>MOMENTUM</p>
                        </a>
                        <a href="#">
                            <p>游戏</p>
                        </a>
                        <a href="#">
                            <p>GSP600</p>
                        </a>
                        <a href="#">
                            <p>真无线二代</p>
                        </a>
                        <a href="#">
                            <p>IE800</p>
                        </a>
                    </div>
                </div>
                <div>
                    <a id="close" href="javascript:;">
                        <img src="./images/index/叉.png">
                    </a>
                </div>
            </div>
        </div>

    </header>

    <table></table>
    <div class="container">
        <div class="left">
            <input id="userId" type="text" hidden>
            <div class="info">
                <p class="h3">个人中心</p>
                <a class="active" data-id="user-info" href="javascript:;">个人资料</a>
                <a data-id="change-password" href="javascript:;">修改密码</a>
                <a data-id="address" href="javascript:;">地址管理</a>
                <a data-id="notice" href="javascript:;">到货通知</a>
            </div>
            <div class="order">
                <p class="h3">订单中心</p>
                <a data-id="my-order" href="javascript:;">我的订单</a>
            </div>
        </div>

        <div class="right">

            <!-- 个人资料 -->
            <div id="user-info" class="index">
                <div>
                    <label>上传头像</label>
                    <div id="preview">
                        <input type="file" data-url="" accept="image/*" id="avatar" />
                    </div>
                </div>
                <div>
                    <label><span>*</span>昵称</label>
                    <input type="text" onblur="uname_check()" id="uname" placeholder="请输入昵称" class="input-style" />
                    <span id="uname_msg"></span>
                </div>
                <div>
                    <label>性别</label>
                    <input type="radio" name="gender" id="woman" value="0" />
                    <label class="none" for="woman">女</label>
                    <input type="radio" name="gender" id="man" value="1" />
                    <label class="none" for="man">男</label>
                    <input type="radio" checked name="gender" id="none" value="2" />
                    <label class="none" for="none">保密</label>
                </div>
                <div>
                    <label>生日</label>
                    <input type="date" id="birthday" class="input-style" />
                </div>
                <div>
                    <label>手机</label>
                    <input type="text" disabled id="phone" class="input-style" />
                </div>
                <div>
                    <label><span>*</span>邮箱</label>
                    <input type="text" onblur="email_check()" id="email" placeholder="请输入邮箱" class="input-style" />
                    <span id="email_msg"></span>
                </div>
                <div>
                    <button onclick="edit()" type="button">确定</button>
                </div>
            </div>

            <!-- 修改密码 -->
            <div id="change-password">
                <div>
                    <label class="label-style">旧密码</label>
                    <input onblur="check_old()" class="input-style" type="password" placeholder="请正确输入旧密码" id="old_pwd" />
                    <a class="unknow" href="javascript:;"><img class="w-16" src="./images/user/icon/显示.png"></a>
                    <span id="opMsg" class="span-style"></span>
                </div>
                <div>
                    <label class="label-style">新密码</label>
                    <input onblur="check_new()" class="input-style" type="password" placeholder="请输入新密码" id="new_pwd" />
                    <a class="unknow" href="javascript:;"><img class="w-16" src="./images/user/icon/显示.png"></a>
                    <span id="npMsg" class="span-style"></span>
                </div>
                <div>
                    <button onclick="change()" type="button">确定</button>
                </div>
            </div>

            <!-- 地址管理 -->
            <div id="address">
                <div class="top">
                    <a id="open" href="javacript:;"><img src="./images/admin/icon/Plus.png"> 新增收货地址</a>
                </div>
                <div class="bottom">
                    <div class="list">
                        <ul class="list-item">
                            <script id="address_list" type="text/html">
                                {{if data!=''}}
                                {{each data}}
                                <li>
                                    <div>
                                        <p>{{$value.addressName}}</p>
                                        <p>{{$value.cellphone}}</p>
                                        <p>{{$value.address}}</p>
                                    </div>
                                    <div>
                                        <a href="javascript:;" ><img src="./images/admin/icon/Write.png"></a>
                                        <a href="javascript:;" onclick="delete_address({{$value.aid}})"><img src="./images/admin/icon/Garbage.png"></a>
                                    </div>
                                </li>
                                {{/each}}
                                {{else}}
                                <img class="noImg" src="./images/user/icon/noAddress.png">
                                {{/if}}
                            </script>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 到货通知 -->
            <div id="notice">
                <ul class="top">
                    <li class="on">商品</li>
                    <li>价格</li>
                    <li>通知状态</li>
                    <li>当前库存</li>
                    <li>操作</li>
                </ul>
                <div class="bottom">
                    <img src="./images/user/icon/noOrder.png">
                    <p>暂无到货通知</p>
                </div>
            </div>

            <!-- 我的订单 -->
            <div id="my-order">
                <ul class="top">
                    <li class="on">全部订单</li>
                    <li>待付款</li>
                    <li>待发货</li>
                    <li>待收货</li>
                    <li>待评价</li>
                </ul>
                <div class="bottom">
                    <script id="order_list" type="text/html">
                        {{if order}}
                        {{each order}}
                        <div class="list">
                            <div class="title">
                                <p>订单编号：{{$value.orderTime}}</p>
                                {{if $value.status == 1}}
                                <p>待付款</p>
                                {{else}}
                                <p>待发货</p>
                                {{/if}}
                            </div>
                            <div class="item">
                                <img src="{{$value.img1}}">
                                <div>
                                    {{$value.pname}}
                                </div>
                                <p id="num">×{{$value.pnum}}</p>
                                <p id="price">¥{{$value.price}}</p>
                            </div>
                            <div class="play">
                                <div class="left">
                                    {{if $value.status == 1}}
                                    <p>应支付：<span>¥{{$value.total}}</span></p>
                                    {{else}}
                                    <p>已支付：<span>¥{{$value.total}}</span></p>
                                    {{/if}}
                                </div>
                                <div class="right">
                                    {{if $value.status == 1}}
                                    <a href="javascript:;" onclick="del_order({{$value.oid}})">取消订单</a>
                                    <a href="javascript:;" onclick="order_updateByOid({{$value.oid}})">立即支付</a>
                                    {{else}}
                                    <a href="javascript:;">售后申请</a>
                                    <a href="javascript:;">查看详情</a>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                        {{/each}}
                        {{else}}
                        <img src="./images/user/icon/noOrder.png">
                        <p>暂无订单列表</p>
                        {{/if}}
                    </script>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹出遮掩层 -->
    <div class="container-model">
        <div class="model">
            <a href="javacript:;" id="close_model">×</a>
            <h2>添加地址</h2>
            <form>
                <div>
                    <label id="aname_msg"></label>
                    <input type="text" id="aname" onblur="check_name()" placeholder="收件人" />
                </div>
                <div>
                    <label id="aphone_msg"></label>
                    <input type="text" id="aphone" onblur="check_phone()" placeholder="手机号" />
                </div>
                <div>
                    <label id="check_msg"></label>
                    <div class="check_box">
                        <select name="province" id="province" onblur="check_city()">
                            <option value="请选择城市">请选择省份</option>
                        </select>
                        <select name="city" id="city" onblur="check_city()" >
                            <option value="请选择城市">请选择城市</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label id="address_msg"></label>
                    <input type="text" id="user_address" onblur="check_address()" placeholder="详细地址" />
                </div>
                <div>
                    <button onclick="save_address()" type="button">确定</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 尾部 -->
    <iframe src="./footer.html" width="100%" frameborder="0" scrolling="no" height="414px"></iframe>

    <script src="./js/head.js"></script>
    <script src="./js/Province_city.js"></script>
    <script src="./js/user_tool.js"></script>
</body>

</html>